<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common::commonHeader('办理银行卡')">

<body>
<style type="text/css">
    .errorDiv {
        color: red;
        font-size: 12px;
        margin-left: 10px;
        margin-top: 5px;
    }
</style>
<nav th:replace="common::commonNav"></nav>

<div class="col-4" style="margin: auto;">
    <div class="card">
        <div class="card-header" style="margin: auto;">
            <ul class="nav nav-tabs">
                <li class="nav-item">
                    <p class="nav-link active text-danger">
                        <img class="iconImg" th:src="@{~/img/idAuth-red.png}"/>身份认证
                    </p>
                </li>
                <li class="nav-item">
                    <p class="nav-link text-secondary">
                        <img class="iconImg" th:src="@{~/img/active-card-gray.png}"/>激活银行卡
                    </p>
                </li>
                <li class="nav-item">
                    <p class="nav-link text-secondary">
                        <img class="iconImg" th:src="@{~/img/bind-card-gray.png}"/>绑定银行卡
                    </p>
                </li>
            </ul>
        </div>

        <!-- 用户身份信息校验 -->
        <div th:if="${code != null} and ${code} ne 200" class="alert alert-danger alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <p>错误码：<span th:text="${code}"></span></p>
            <p>错误信息：<span th:text="${message}"></span></p>
        </div>
        <div class="card-body">
            <div class="mt-3 mb-5">
                <div class="container" style="padding-left: 50px;">
                    <form th:object="${userInfo}" th:action="@{/home/userInfo/check}" th:method="post">
                        <div class="form-group row">
                            <label for="chineseName" class="col-xs-3 col-form-label mr-2">中文名</label>
                            <div class="col-xs-9">
                                <input type="text" th:field="*{chineseName}" class="form-control" placeholder="请输入真实姓名"
                                       id="chineseName" name="chineseName" required/>
                            </div>
                            <div class="errorDiv" th:if="${error} eq 'true'" th:text="${err_chineseName}"></div>
                        </div>


                        <div class="form-group row">
                            <label for="englishName" class="col-xs-3 col-form-label mr-2">英文名</label>
                            <div class="col-xs-9">
                                <input type="text" th:field="*{englishName}" class="form-control" placeholder="请输入英文名"
                                       id="englishName" name="englishName"/>
                            </div>
                            <div class="errorDiv" th:if="${error} eq 'true'" th:text="${err_englishName}"></div>
                        </div>

                        <div class="form-group row">
                            <label for="idNumber" class="col-xs-3 col-form-label mr-2">身份证号码</label>
                            <div class="col-xs-9">
                                <input type="text" th:field="*{idNumber}" class="form-control" placeholder="请输入身份证号码"
                                       id="idNumber" name="idNumber" required/>
                            </div>
                            <div class="errorDiv" th:if="${error} eq 'true'" th:text="${err_idNumber}"></div>
                        </div>

                        <div class="form-group row">
                            <label for="gender" class="col-xs-3 col-form-label mr-2">性别</label>
                            <div class="col-xs-4">
                                <select th:field="*{gender}" id="gender" name="gender" class="form-control">
                                    <option value="男">男</option>
                                    <option value="女">女</option>
                                </select>
                            </div>
                            <div class="errorDiv" th:if="${error} eq 'true'" th:text="${err_gender}"></div>
                        </div>

                        <div class="form-group row">
                            <p class="col-xs-3 col-form-label mr-2">出生省份</p>
                            <div class="col-xs-9" style="margin-right: 10px;">
                                <!--省份选择-->
                                <select th:field="*{province}" id="province" name="province" class="form-control"
                                        onchange="showCity(this)">
                                    <option value="">请选择省份</option>
                                </select>
                            </div>
                            <div class="errorDiv" th:if="${error} eq 'true'" th:text="${err_province}"></div>
                        </div>

                        <div class="form-group row">
                            <p class="col-xs-3 col-form-label mr-2">出生城市</p>
                            <div class="col-xs-9" style="margin-right: 10px;">
                                <!--城市选择-->
                                <select th:field="*{city}" id="city" name="city" class="form-control"
                                        onchange="showCountry(this)">
                                    <option value="">请选择城市</option>
                                </select>
                            </div>
                            <div class="errorDiv" th:if="${error} eq 'true'" th:text="${err_city}"></div>
                        </div>

                        <div class="form-group row">
                            <p class="col-xs-3 col-form-label mr-2">出生区县</p>
                            <div class="col-xs-9" style="margin-right: 10px;">
                                <!--县区选择-->
                                <select th:field="*{country}" id="country" name="country" class="form-control"
                                        onchange="selectCountry(this)">
                                    <option value="">请选择县区</option>
                                </select>
                            </div>
                            <div class="errorDiv" th:if="${error} eq 'true'" th:text="${err_country}"></div>
                        </div>

                        <div class="form-group row">
                            <label for="email" class="col-xs-3 col-form-label mr-2">邮箱地址</label>
                            <div class="col-xs-9" style="margin-right: 60px;">
                                <input th:field="*{email}" type="email" class="form-control" placeholder="请输入邮箱地址"
                                       id="email" name="email" required/>
                            </div>
                            <div class="errorDiv" th:if="${error} eq 'true'" th:text="${err_email}"></div>
                        </div>

                        <div class="form-group row">
                            <label for="phone" class="col-xs-3 col-form-label mr-2">手机号码</label>
                            <div class="col-xs-9">
                                <input th:field="*{phone}" type="text" class="form-control" placeholder="请输入手机号码"
                                       id="phone" name="phone" required/>
                            </div>
                            <div class="errorDiv" th:if="${error} eq 'true'" th:text="${err_phone}"></div>
                        </div>

                        <div class="form-group row float-right">
                            <div class="offset-xs-3 col-xs-9">
                                <button type="submit" class="btn btn-danger">
                                    下一步<img th:src="@{~/img/next-step-light.png}"
                                            style="width: 25px; margin-top: -2px; margin-left: 5px;"/>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="card-footer">
            <h6 class="card-text text-danger">
                为提供更好的银行卡服务，请您在申请银行卡时，务必填写本人真实有效的个人信息。如果信息有误将会直接影响银行卡的办理。点击提交后，系统将会发送邮件到您的邮箱，请及时查看并激活银行卡。
            </h6>
        </div>
    </div>
</div>

<script th:src="@{~/js/city.js}"></script>
<script th:src="@{~/js/city-select.js}"></script>
</body>
</html>